<template>
	<view>
		<view class="grid-box">
			<u-form :model="addForm" ref="uForm" label-width="180">
				<u-form-item :label="parentId > 0?'部门名称':'客户组名称'" prop="name" required >
					<u-input v-model="addForm.name" :border="true" placeholder="请填写名称" />
				</u-form-item>
				<u-form-item label="所属加盟商" prop="franchiseId" required v-if="parentId == 0 && getfranchiseId == 0">
					<u-input v-model="selectFranchise" type="select" placeholder="请选择所属加盟商" :border="true" @click="franchiseShow = true" />
					<franchiseList v-model="franchiseShow" @confirm="getSelectFranchise"></franchiseList>
				</u-form-item>
				<u-form-item label="客户组类型" required v-if="parentId == 0">
					<u-input v-model="selectEnterprisetype" type="select" :border="true" @click="enterprisetypeShow = true" />
					<u-select v-model="enterprisetypeShow" :list="typeArr" @confirm="confirmEnterprisetype"></u-select>
				</u-form-item>
				<u-form-item label="所在地区" prop="cityid" required >
					<u-input v-model="selectArea" type="select" :border="true" @click="cityshow = true" placeholder="请选择地区"/>
				</u-form-item>
				<!-- <u-form-item label="用户名" prop="servicetime">
					<u-input v-model="addForm.servicetime" :border="true" placeholder="请填写用户名" />
				</u-form-item> -->
				<u-form-item label="绑定号码" required>
					<u-input v-model="addForm.mobile" :border="true"/>
				</u-form-item>
				<u-form-item v-if="parentId == 0">
					<view>
						<view>选择客户组账户管理模式：</view>
						<u-radio-group v-model="addForm.type">
							<view class="u-border-bottom u-p-b-15 u-m-b-15">
								<u-radio :name="0">余额账户分管</u-radio>
								<view class="u-tips-color u-font-24" style="line-height: 1.4em;">账户分管模式为，各部门回收余额分给各部门管理</view>
							</view>
							<view>
								<u-radio :name="1">余额账户统管</u-radio>
								<view class="u-tips-color u-font-24" style="line-height: 1.4em;">账户统管模式为，各部门回收余额统一到客户组内，授权给一个部门进行管理（新建客户组为首个部门，创建后可更换）</view>
							</view>
						</u-radio-group>
					</view>
				</u-form-item>
			</u-form>
		</view>
		<!-- 底部按钮 -->
		<view class="bottom-box">
			<view class="fixed-container">
				<view class="btn-group">
					<view class="u-flex">
						<view class="u-p-r-30" @click="back"><text style="text-decoration: underline;">返回</text></view>
						<view class="u-flex-1"><u-button type="primary" @click="submitForm">确定新建</u-button></view>
					</view>
				</view>
			</view>
			<view class="fixed-placeholder"></view>
		</view>
		<!-- 选择所在地区 -->
		<citypicker ref="citypicker" :show="cityshow" :level="4" @select="getSelectCity" @close="cityshow = false"></citypicker>
	</view>
</template>

<script>
	import franchiseList from '@/components/form-select-type/franchise-list.vue'
	import {
		mapState
	} from 'vuex';
	export default {
		// props:{
		// 	parentId:{
		// 		type: [Number, String],
		// 		default: 0
		// 	}
		// },
		components:{
			franchiseList
		},
		data() {
			return {
				parentId: 0,
				getfranchiseId: 0,
				addForm: {
					franchiseId: null,
					name: '',
					type: 0,
					enterpriseType: 0,
					cityid: 0,
					mobile: null
				},
				rules: {},
				// 选择地区
				cityshow: false,
				selectArea: '',
				// 选择加盟商
				franchiseShow: false,
				selectFranchise: '',
				// 客户组类型
				enterprisetypeShow: false,
				selectEnterprisetype: '',
				typeArr: [
					// {
					// 	name: '全部',
					// 	value: null
					// },
					{
						label: '企业',
						value: 1
					},
					{
						label: '学校',
						value: 2
					},
					{
						label: '机关',
						value: 3
					},
					{
						label: '环卫',
						value: 4
					}
				],
				typeId: 0,
			}
		},
		computed: {
			// ...mapState({
			// 	franchiseId: state => state.franchiseId,
			// })
		},
		onLoad(opt) {
			this.parentId = opt.parentId
			if(opt.franchiseId){
				this.addForm.franchiseId = opt.franchiseId
				this.getfranchiseId = opt.franchiseId
			}
			
			if (this.parentId > 0) {
				uni.setNavigationBarTitle({
					title: '新建部门'
				});
			} else {
				uni.setNavigationBarTitle({
					title: '新建客户组'
				});
			}
		},
		methods: {
			// 自定义验证方法
			validateForm() {
				const errors = [];

				// 验证必填字段
				if (!this.addForm.name) {
					errors.push('请填写客户组名称');
				}

				if (!this.addForm.franchiseId && this.parentId == 0) {
					errors.push('请选择所属加盟商');
				}

				if (!this.addForm.enterpriseType && this.parentId == 0) {
					errors.push('请选择客户组类型');
				}

				if (!this.addForm.cityid || this.addForm.cityid === 0) {
					errors.push('请选择所在地区');
				}

				if (!this.addForm.mobile) {
					errors.push('请填写绑定号码');
				} else if (!/^1[3-9]\d{9}$/.test(this.addForm.mobile)) {
					errors.push('请输入正确的手机号码');
				}

				return errors;
			},
			// 提交表单
			submitForm() {
				// 使用自定义验证方法
				const errors = this.validateForm();
				
				if (errors.length > 0) {
					// 显示错误信息
					uni.showToast({
						title: errors[0], // 显示第一个错误
						icon: 'none'
					});
					return;
				}
				
				uni.showLoading({
					title: '提交中...'
				})
				let param = {
					enterpriseId: 0, //0为创建客户组， 非0为创建部门（部门的上级客户组ID）
					name: this.addForm.name,
					cityId: this.addForm.cityid,
					type: this.addForm.enterpriseType,
					user: {
						defaultPassType: 0, //密码为空时生效 0.888888 1.随机 其它.手机后几位
						name: this.addForm.name,
						mobile: this.addForm.mobile,
						password: this.addForm.password
					}
				}
				// 新建部门时的参数改变
				if (this.parentId) {
					param.enterpriseId = this.parentId
				}else{
					param.franchiseId = this.addForm.franchiseId
					param.mode = this.addForm.type
				}
				this.$u.post('/Enterprise/Create', [param]).then((res) => {
					uni.showModal({
						content: '操作成功',
						showCancel: false,
						success: (res)=> {
							if (res.confirm) {
								uni.navigateBack()
							}
						}
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			// 选择客户组类型
			confirmEnterprisetype(e){
				console.log('选择客户组',e)
				this.addForm.enterpriseType = e[0].value
				this.selectEnterprisetype = e[0].label
				this.enterprisetypeShow = false
			},
			// 选择加盟商
			getSelectFranchise(obj){
				console.log('getSelectFranchise',obj)
				this.franchiseShow = false
				this.addForm.franchiseId = obj.id
				this.selectFranchise = obj.name
			},
			// 选择地区
			getSelectCity(arr) {
				console.log(arr)
				this.cityshow = false
				// this.selectArea = '';
				let cityidArr = [];
				let getArr = arr.filter(n => n.id != 0)
				let areaname = '';
				getArr.forEach((item, index) => {
					if (index == getArr.length - 1) {
						areaname += item.name
					} else {
						areaname += item.name + '-'
					}
					cityidArr.push(item.id);
				});
				if (cityidArr.length > 0)
					// this.form.cityid = cityidArr.join(',');
					this.addForm.cityid = cityidArr[cityidArr.length - 1];
				if (areaname)
					this.selectArea = areaname;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bottom-box {
		.fixed-container {
			position: fixed;
			bottom: 0;
			background-color: #fff;
			width: 750rpx;
			padding-top: 0;
			height: 132rpx;
			z-index: 99;
			box-shadow: 0 0 16rpx #e7e7e7;
		}
	
		.fixed-placeholder {
			height: 132rpx;
			width: 750rpx;
			margin-top: 30rpx;
		}
	
		.total {
			line-height: 80rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0;
		}
	
		.btn-group {
			padding: 30rpx;
	
			.u-flex-1+.u-flex-1 {
				margin-left: 20rpx;
			}
		}
	}
</style>